<template>
  <view class="aftersale">
    <!-- 退换货 -->
    <view class="head">
      <view class="head_top">选择售后方式</view>
      <view class="head_bottom">
        <view class="head_sales" @click="sales">
          退货
          <view class="sanjioa_icon">
            <image src="/static/sanjiao.png" alt="">
          </view>
        </view>
        <view class="head_exchange">换货</view>
      </view>
    </view>

    <view class="reason">描述申请原因</view>
    <view>
       <u--textarea style="background-color: #eeeeee" v-model="value"  height="159rpx"></u--textarea>
    </view>

    <view class="caption">
      <view class="caption_title">添加照片说明</view>
      <view class="caption_img">
        <view class="caption_img_one"></view>
        <view class="caption_img_two"></view>
	      <u-upload
	      	:fileList="fileList1"
	      	@afterRead="afterRead"
	      	@delete="deletePic"
	      	name="1"
	      	multiple
	      	:maxCount="10"
          width="226rpx"
	        height="226rpx"
	      ></u-upload>
      </view>
    </view>

    <view class="button">
      立即申请
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      fileList1: [],
    };
  },
  methods: {
    sales() {
      uni.navigateTo({
        url: "/pages_v2/commodity/Apply/index",
      });
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
      console.log(79, this.fileList1);
    },
    uploadFilePromise(url) {
      console.log("url", url);
      // return new Promise((resolve, reject) => {
      //   let a = uni.uploadFile({
      //     url: "", // 仅为示例，非真实的接口地址
      //     filePath: url,
      //     name: "file",
      //     formData: {
      //       user: "test",
      //     },
      //     success: (res) => {
      //       setTimeout(() => {
      //         resolve(res.data.data);
      //       }, 1000);
      //     },
      //   });
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.aftersale {
  // background-color: skyblue;
  padding: 0 40rpx;
  overflow: hidden;
  .head {
    margin-top: 40rpx;
    .head_top {
      width: 168rpx;
      height: 40rpx;
      font-size: 28rpx;
      color: #888;
      line-height: 40rpx;

      margin-bottom: 23rpx;
    }
    .head_bottom {
      display: flex;
      .head_sales,
      .head_exchange {
        width: 140rpx;
        height: 50rpx;
        font-size: 26rpx;
        text-align: center;
        line-height: 50rpx;
      }
      .head_sales {
        position: relative;
        border: 1rpx solid #000;
        margin-right: 22rpx;
      }
      .head_exchange {
        border: 1rpx solid #888;
      }
    }
  }
}
.sanjioa_icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 31rpx;
  height: 26rpx;
  image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
.reason {
  width: 168rpx;
  height: 40rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #888;
  margin: 63rpx 0 22rpx 0;
}
.caption {
  margin-top: 60rpx;
  .caption_title {
    width: 168rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    color: #888;
    margin-bottom: 15rpx;
  }
  .caption_img {
    position: relative;
    width: 226rpx;
    height: 226rpx;
    // background-color: pink;
    .caption_img_one {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6rpx;
      height: 60rpx;
      transform: translate(-50%, -50%);
      background-color: #fff;
    }
    .caption_img_two {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60rpx;
      height: 6rpx;
      transform: translate(-50%, -50%);
      background-color: #fff;
    }
  }
}
.button {
  position: fixed;
  bottom: 33rpx;
  right: 20rpx;
  width: 710rpx;
  height: 90rpx;
  font-size: 30rpx;
  color: #fff;
  text-align: center;
  line-height: 90rpx;
  margin: 0 auto;
  background-color: #000;
}
::v-deep .uicon-camera-fill {
  display: none;
}
</style>